<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Swiper的切换</title>
	<link rel="stylesheet" href="./pages/home/certify-swiper6/css/swiper-bundle.min.css">
	<link rel="stylesheet" href="./pages/home/certify-swiper6/css/certify.css">
	<script src="./pages/home/certify-swiper6/js/swiper-bundle.min.js"></script>

</head>

<body>
	<div id="certify">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="./pages/home/certify-swiper6/images/three_pic01.jpg" />
					<div>
						<b>菜品之保障</b>
						<i></i>
						<p>原辅食材产地/基地合作： 从种子到餐桌，从流程到工艺； 老娘舅携手苏垦打造大米专供基地</p>
					</div>
				</div>
				<div class="swiper-slide"><img src="./pages/home/certify-swiper6/images/three_pic02.jpg" />
					<div>
						<b>菜品之保障</b>
						<i></i>
						<p>原辅食材产地/基地合作： 统一种养殖管理、统一物流配送； 老娘舅供应链延伸至东南亚</p>
					</div>
				</div>
				<div class="swiper-slide"><img src="./pages/home/certify-swiper6/images/three_pic03.jpg" />
					<div>
						<b>菜品之保障</b>
						<i></i>
						<p>原辅食材产地/基地合作： 加强原辅调味料采购监督，与行业品牌中粮、太太乐、联合利华等强强合作</p>
					</div>
				</div>

			</div>
		</div>

		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>

	<script>
		certifySwiper = new Swiper('#certify .swiper-container', {
			watchSlidesProgress: true,
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true,
			loopedSlides: 5,
			autoplay: {
				delay: 3000, //滚动间隔, 单位毫秒
				disableOnInteraction: false, // false代表不开启此功能设定
				pauseOnMouseEnter: true, //鼠标进入时暂停
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			pagination: {
				el: '.swiper-pagination',
				//clickable :true,
			},
			on: {
				progress: function (progress) {
					for (i = 0; i < this.slides.length; i++) {
						var slide = this.slides.eq(i);
						var slideProgress = this.slides[i].progress;
						modify = 1;
						if (Math.abs(slideProgress) > 1) {
							modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
						}
						translate = slideProgress * modify * 260 + 'px';
						scale = 1 - Math.abs(slideProgress) / 5;
						zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
						slide.transform('translateX(' + translate + ') scale(' + scale + ')');
						slide.css('zIndex', zIndex);
						slide.css('opacity', 1);
						if (Math.abs(slideProgress) > 3) {
							slide.css('opacity', 0);
						}
					}
				},
				setTransition: function (swiper, transition) {
					for (var i = 0; i < this.slides.length; i++) {
						var slide = this.slides.eq(i)
						slide.transition(transition);
					}

				}
			}

		})
	</script>
</body>

</html>